<link rel="stylesheet" href="ccay/example/demo.css"  type="text/css" />
<script type="text/javascript" src="ccay/example/demo.js" charset="utf-8"></script>
<script type="text/javascript" src="ccay/example/ui/permissionControl/permissionControl.js" charset="utf-8"></script>

<div id="permissionControlDemo">
    <div title='API' tabid='tab1'>
       <div>
				<h2>&lt;div class=" " ccayPermission=" " >&lt;/div></h2>				
				
				<h3 style="padding-top:10px;">作用：根据ccayPermission绑定的权限，该html是否显示</h3>
				<h3 style="padding-top:10px;padding-bottom:10px;">说明：其他标签也可使用此功能，如input标签等</h3>
				<form id="param" class="init ccay-form">
					<div class="ccay-form-body">
							<ul>							
							    <li class="ccay-form-row">
							        <samp><h3>参数</h3></samp>
									<span class="ccay-form-input"><h3>描述</h3></span>
								</li>
							</ul>
					</div>			
					<div class="ccay-form-custom">
						<ul>															
							<li class="ccay-form-row">
							    <samp class="i18n" i18nKey="class"></samp>							    
								<span class="ccay-form-input">
								   <div class="ccay-form-body" >
						               	<ul>
										  <li class="ccay-form-row">
										 	<samp class="i18n" i18nKey="hasPermission"></samp>
										 	<span class='ccay-form-input'>有指定的权限，该html才生效</span>
										 </li>
										 <li class="ccay-form-row">
										 	<samp class="i18n" i18nKey="noPermission"></samp>
										 	<span class='ccay-form-input'>没有指定的权限，该html才生效</span>
										 </li>
						               </ul>
						            </div>
								</span>
						    </li>

							<li class="ccay-form-row">
							    <samp class="i18n" i18nKey="ccayPermission"></samp>
							    <span class="ccay-form-input">指定后台服务开发时，方法绑定的权限，如"enumManagement:query"</span>
							</li>
							
				    </ul>
			   </div>
		    </form>
			</div>	    
    </div>	
	<div title='Demo' tabid='tab2'>

      <h4><span>示例1：按钮的权限控制hasPermission</span></h4>
	      <div style='padding-left:30px'>
		      <span>你有enumManagement:query 权限，才能看到下面的按钮:</span>
		      <div class='demo'>
		         <input type="button" value="你有enumManagement:query权限，才能看到我" class="init hasPermission " ccayPermission="enumManagement:query">
		      </div>
		      <div class="codeArea">
				 <pre id='html1'>&lt;input type="button" value="能看到我你就有权限'enumManagement:query'" class="init hasPermission " ccayPermission="enumManagement:query" /></pre>
			  </div>
		      <div class="try">
				 <a onclick="Ccay.example.openTry('#permissionControlDemo','',$('#html1').html())">亲自试一试</a>
			  </div>
		  </div>	  
	  <h4><span>示例2：div的一个权限控制hasPermission</span></h4>
		  <div style='padding-left:30px'>
		      <span>你有enumManagement:create 权限，才能看到下面区域:</span>
		      <div class='demo'>
			     <div style="width:500px;height:30px;border:solid 1px #900b09;" >
					<div class="init hasPermission" ccayPermission="enumManagement:update">
					   你有enumManagement:update权限，你才能看到我哦！
					</div>
			      </div>
			  </div>
			  <div class="codeArea">
				 <pre id='html2'>&lt;div class="init hasPermission" ccayPermission="enumManagement:update" >你有enumManagement:update权限，你才能看到我哦！&lt;/div></pre>
			  </div>
			  <div class="try">
				 <a onclick="Ccay.example.openTry('#permissionControlDemo','',$('#html2').html())">亲自试一试</a>
			  </div>
	      </div>
	  <h4><span>示例3：div的多个权限控制hasPermission    (多个权限的与关系,用","拼接)</span></h4>
		  <div style='padding-left:30px'>
		      <span>你有enumManagement:update和enumManagement:delete权限，才能看到下面的区域:</span>
		      <div class='demo'>
		      <div style="width:500px;height:30px;border:solid 1px #900b09;" >
			      <div class="init hasPermission" ccayPermission="enumManagement:update,enumManagement:delete">
					      你有enumManagement:update和enumManagement:delete权限，你才能看到我哦！
			      </div>
			  </div>    
		      </div>
		      <div class="codeArea">
				 <pre id='html3'>&lt;div class="init hasPermission" ccayPermission="enumManagement:update,enumManagement:delete">你有enumManagement:update和enumManagement:delete权限，你才能看到我哦！&lt;/div></pre>
			  </div>
			  <div class="try">
				 <a onclick="Ccay.example.openTry('#permissionControlDemo','',$('#html3').html())">亲自试一试</a>
			  </div>
		 </div>	      
      <h4><span>示例4：div的一个权限控制noPermission</span></h4>
	      <div style='padding-left:30px'>
		      <span>你没有enumManagement:import权限，才能看到下面的区域:</span>
		      <div class='demo'>
		      <div class="init noPermission" ccayPermission="enumManagement:import ">
				       你没有enumManagement:import权限，就能看到我哦！
		      </div>
		      </div>
		      <div class="codeArea">
				 <pre id='html4'>&lt;div class="init noPermission" ccayPermission="enumManagement:import ">你没有enumManagement:import权限，就能看到我哦！&lt;/div></pre>
			  </div>
			  <div class="try">
				 <a onclick="Ccay.example.openTry('#permissionControlDemo','',$('#html4').html())">亲自试一试</a>
			  </div>
          </div>
      <h4><span>示例5：div的多个权限控制noPermission (多个权限的或关系,用"|"拼接)</span></h4>
	      <div style='padding-left:30px'>
		      <span>你没有enumManagement:update或 enumManagement:delete权限，才能看到下面的区域:</span>
		      <div class='demo'>
		      <div style="width:500px;height:30px;border:solid 1px #900b09;" >
			      <div class="init hasPermission" ccayPermission="enumManagement:update|enumManagement:delete">
					      你有 enumManagement:update或 enumManagement:delete 权限就能看到我哦！
			      </div>
		      </div>
		      </div>
		      <div class="codeArea">
				 <pre id='html5'>&lt;div class="init hasPermission" ccayPermission="enumManagement:update|enumManagement:delete">你有 enumManagement:update或 enumManagement:delete 权限就能看到我哦！&lt;/div></pre>
			  </div>
			  <div class="try">
				 <a onclick="Ccay.example.openTry('#permissionControlDemo','',$('#html5').html())">亲自试一试</a>
			  </div>
		  </div>   
	  <h4><span>示例6：IGrid的权限控制</span></h4>
	  
	  <div id="igridDemo1"></div>
	  <h3>js Code</h3>
      	<div class="codeArea">
      		<pre id='html6'>
     var gridParam1 = {
	    height: 347,
	    columns: [
	       {columnType:"operate",content:"${#userOp()}",width:100},
	 
	       //<span class="showClew"> 不定义type说明显示的数据类型为默认的字符串类型；若定义renderer，则优先显示renderer定义的数据类型</span>
	       {field: 'name', width:70, header: "string"},
	 
	       //<span class="showClew"> type: 'bool'说明显示的数据类型为布尔类型；format: {htmlView: true}说明该列显示为图标格式</span>
	       {field: 'sex', width:50, header: "bool", type: 'bool', format: {htmlView: true}},
	    ]
     }
	//图标的显示
	userOp=function(record) {
		var str = new Array();
		if (Ccay.Permission.check("enumManagement:query")) {
			str.push("<a class='ccay-icon key'></a>");
		}else{
			str.push("<span style='margin-left:16px'></span>");
		}
	}
	    </pre>
	  </div>
    </div>	
    
    <div title="试一试" tabid="trytab" >
	    <fieldset class='ccay-demo'>
	    <legend ><h2>代码区</h2></legend>
		   
		   <span>请在下面的文本框中编辑您的代码，然后单击此按钮测试结果  ————></span><input value="try it yourself" type="button" onclick="Ccay.example.runDemo()" /> 

				<div>
				    <table  style="width:100%;">
				      <tr>
				        <td style="width:100%;">
						<h3>js Code:</h3>	
						  <!-- 高度按需来调整。默认最小应为100px -->					
	                      <textarea id="jsTxt" style="height:100px;width:99%;"></textarea>
	                    </td>   
	                  </tr>
	                  <tr>
	                    <td style="width:100%;">
						<h3>html Code:</h3>
						  <!-- 高度按需来调整。默认最小应为100px -->
	                      <textarea id="htmlTxt" style="height:100px;width:99%;"></textarea>
	                    </td>
	                  </tr> 
                    </table>
				</div>
           </fieldset>
        <fieldset class='ccay-demo'>
          <legend ><h2>结果区</h2></legend>
			<div>
				<div style="overflow:auto;" id="demoMainPanel"></div>
			</div>
        </fieldset>
     </div>
	<div title="FAQ">
	  <form class="init ccay-form">
		<div class="ccay-form-body ccay-form-custom">
			<ul>						
			    <li class="ccay-form-row">
			        <samp><h3>问题</h3></samp>
					<span class="ccay-form-input">
						<h3>解决方案</h3>
					</span>
				</li>
				<!-- 若问题和内容较多，可在li中的class加上ccay-form-whole -->
				<li class="ccay-form-row ccay-form-whole">
					<samp class="i18n" i18nKey="1.为什么要在class中加上init？"></samp>							    
					<span class="ccay-form-input">加上init后，在进入页面时，系统自动会把标签的样式，组件初始化等，不加上的话，会导致组件初始化不了。<p>手动加载的要自己用方法来初始化。</span>
				</li>	
			</ul>
		</div>
	  </form>						
	</div>	 
</div>

